<template>
  <div v-loading="tabLoading">
    <el-button type="primary" class="fr" @click="tab2CreateItem" v-permission="'materialInfo.add'">创建</el-button>
    <div class="filter-container">
      <el-select v-model="tab2QueryParams.vendor_id" class="filter-item" filterable remote :remote-method="tab2Init"
        placeholder="请选择供应商" clearable>
        <el-option v-for="i in tab2VendorOptions" :key="i.id" :label="i.label" :value="i.value"></el-option>
      </el-select>
      <el-button class="filter-item" type="success" plain @click="tab2Research">查询</el-button>
    </div>
    <z-table :list="tab2List" :tableProps="tab2TableProps" :columns="tab2Columns" @editItem="tab2EditItem"
      @deleteItem="tab2DeleteItem"></z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="tab2QueryParams.page"
      :limit.sync="tab2QueryParams.size" @change="paginationschane"></z-pagination>
    <z-form-dialog :name="''" :data="tab2Data" :formProps="tab2FormProps" :fields="tab2Fields" @submit="tab2Submit"
      :submitLoading="submitLoading" :visible.sync="tab2EditFormVisible"></z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: '',
  components: {},
  props: {},
  data() {
    return {
      tabLoading: false,
      submitLoading: false,
      tab2QueryParams: {
        page: 1,
        size: 10,
        material_id: null,
        vendor_id: null,
      },
      total: 0,
      tab2VendorOptions: [],
      tab2List: [],
      tab2TableProps: {
        border: true,
        opsColWith: 80,
        hideOperations: true,
      },
      tab2Columns: [
        { title: '供应商代码', key: 'vendor_code', width: 200 },
        { title: '供应商名称', key: 'vendor_name' },
        { title: '是否免来料检', key: 'is_exemption' },
        { title: '最小包装量', key: 'min_package_size' },
        { title: '最大包装量', key: 'max_package_size' },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改', key: 'modify_time', width: 140 },
      ],
      tab2Data: {},
      tab2FormProps: {
        dialogWidth: '70%',
        labelWidth: '140px',
      },
      tab2Fields: [
        {
          title: '供应商',
          key: 'vendor_id',
          name: 'select',
          options: [],
          tips: '如果不选，则适用于所有供应商',
          props: { clearable: true },
        },
        { title: '是否免检', key: 'is_exemption', name: 'switch', props: { activeValue: 'Y', inactiveValue: 'N' } },
        { title: '最小包装量', key: 'min_package_size', name: 'number', props: { min: 1 } },
        { title: '最大包装量', key: 'max_package_size', name: 'number', props: { min: 1 } },
      ],
      tab2EditFormVisible: false,
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    tab2Init(val) {
      this.$request(this.$api.vendor + 'getlist', {
        page: 1,
        size: 100,
        queryString: val ? val : '',
      }).then((r) => {
        this.tab2VendorOptions = r.list.map((i) => ({
          label: `${i.vendor_code} ${i.vendor_name}`,
          value: i.id,
        }))
        this.$parent.$parent.$parent.setArrayProps(this.tab2Fields, [
          {
            key: 'vendor_id',
            options: this.tab2VendorOptions,
          },
        ])
      })
      this.tab2Research()
    },
    tab2Research() {
      this.tab2GetList()
    },
    paginationschane(val) {
      this.tab2QueryParams.size = val.limit
      this.tab2QueryParams.page = val.page
      this.tab2GetList()
    },
    tab2GetList() {
      if (!this.$parent.$parent.$parent.data.id) return
      this.tabLoading = true
      this.tab2QueryParams.material_id = this.$parent.$parent.$parent.data.id
      this.$request(this.$api.material + 'getVmList', this.tab2QueryParams)
        .then((r) => {
          this.tabLoading = false
          this.tab2List = r.list
          this.total = r.total
        })
        .catch(() => {
          this.tabLoading = false
        })
    },
    tab2CreateItem() {
      this.tab2Data = { is_exemption: 'N', material_id: this.$parent.$parent.$parent.data.id }
      this.tab2EditFormVisible = true
    },
    tab2EditItem(v) {
      this.tab2Data = {}
      this.$parent.$parent.$parent.pageLoading = true
      this.$request(this.$api.material + 'getbyVmid', {
        id: v.id,
      })
        .then((r) => {
          this.$parent.$parent.$parent.pageLoading = false
          this.tab2Data = r
          this.tab2EditFormVisible = true
        })
        .catch(() => {
          this.$parent.$parent.$parent.pageLoading = false
        })
    },
    tab2DeleteItem(v) {
      this.$confirm('确定要删除这条记录？', '操作确认').then(() => {
        this.$parent.$parent.$parent.pageLoading = true
        this.$request(this.$api.material + 'deleteVm/' + v.id, {}, 'post')
          .then((r) => {
            this.$parent.$parent.$parent.pageLoading = false
            this.$message({
              message: '操作成功',
              type: 'success',
            })
            this.tab2GetList()
          })
          .catch(() => {
            this.$parent.$parent.$parent.pageLoading = false
          })
      })
    },
    tab2Submit() {
      this.submitLoading = true
      this.$request(this.$api.material + 'insertOrUpdateVm', this.tab2Data, 'post')
        .then((r) => {
          this.submitLoading = false
          this.$message({
            message: '操作成功',
            type: 'success',
          })
          this.tab2EditFormVisible = false
          this.tab2GetList()
        })
        .catch(() => {
          this.submitLoading = false
        })
    },
  },
}
</script>

<style lang="less" scoped></style>